<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ApiClassroom } from '../../api';
import { ElMessage, ElMessageBox } from 'element-plus';
import ClrAdd from './ClrAdd.vue';
import ClrUpdate from './ClrUpdate.vue';


const data = ref<UI.Get[]>([])
onMounted(async () => {
    data.value = await ApiClassroom.get()
})
const removeHandler = async (id: number) => {
  await ElMessageBox.confirm('确定删除吗？', '提示', {type: 'warning'})
  await ApiClassroom.remove(id)
  ElMessage.success('删除成功')
  data.value = await ApiClassroom.get()
}
const addRef = ref<InstanceType<typeof ClrAdd>>()
  const updateRef = ref<InstanceType<typeof ClrUpdate>>()
const changeHandler = async () => {
   data.value = await ApiClassroom.get()
};
</script>

<template>
  <el-row :gutter="30">
      <el-col :span="6" v-for="item in data" :key="item.clsr_id">
        <el-card :style="{backgroundColor: item.clsr_occupy===0? '#98FB98' : '#D2B48C'}">
          <span>{{  item.clsr_name}}</span>
            <span>{{ item.clsr_occupy===0 ? '空闲' : '占用'}}</span>
            <el-button type="info" link @click="removeHandler(item.clsr_id)">删除</el-button>
            <el-button type="danger" link @click="updateRef?.begin(item)">修改</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card @click="addRef?.begin()">
          <el-icon  ><Plus /></el-icon>
        </el-card>
      </el-col>
  </el-row>
  <clr-add ref="addRef" @save="changeHandler" />
<clr-update ref="updateRef" @save="changeHandler"/>
</template>



<style lang="scss" scoped>
.el-card{
height: 150px;
margin-bottom: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color:#98FB98 ;
span{
  font-size: 20px;
  margin: 0 10px;
  color:#333;
}
.el-icon{
  font-size: 30px;
  color:#333;
}
.el-button{
  font-size: 18px;
}
}
</style>